import  React,{PropsWithChildren,ReactElement} from "react";
import { } from '@/models'
import TodoInput from './TodoInput';
import TodoItem from './TodoItem';
import { connect } from 'react-redux';

import { CombinedState, TodoState } from '@/store/reducers';
import * as actions from '@/store/actions/todoAction';

import { RouteComponentProps } from 'react-router-dom';
import { StaticContext} from 'react-router';

interface Params { }
export  interface TodosLocationState {
    [names:string]:any
}


type Props = TodoState&typeof actions & RouteComponentProps<Params, StaticContext, TodosLocationState>

const ulStyle: React.CSSProperties = {
    width: "100px"
};
// export interface Props {
    // addNum:(v:number)=>void
// }
export interface State {
    // todos:Array<Todo>  
} 
class Todos extends React.Component<Props,State>{
    // constructor(props:Props){
    //     super(props)
    // }
    // state = {todos:new Array<Todo>()};
    // addTodo = (todo:Todo) =>{
    //     this.setState({todos:[...this.state.todos,todo]},()=>{
    //         // this.props.addNum(this.state.todos.length)
    //     });
        
    // }
    render() {
        let {list,addTodo} =this.props;
        return(
            <div>
                <p>名称:{this.props.location.state.name}</p>
                <TodoInput addTodo={addTodo}/>
                <ul style={ulStyle}>
                    {
                        list.length !== 0 &&list.map((todo)=><TodoItem key={todo.id} todo={todo}/>)
                    }
                </ul>
            </div>
        )
    }
}   

let mapStateToProps = function (state: CombinedState): TodoState {
    return state.todo;
}

export default connect(mapStateToProps, actions)(Todos);